<template>
	<view class="product-container">
		<!-- 顶部标题 -->
		<view class="page-title">产品展示</view>
		
		<!-- 产品图片展示区 -->
		<scroll-view scroll-y class="product-image-container">
			<view 
				v-for="(image, index) in productImages" 
				:key="index"
				class="image-item"
			>
				<image 
					:src="image" 
					mode="widthFix" 
					class="product-image" 
					@click="previewImage(image)"
				></image>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const productImages = ref([])

// 获取产品图片
const getProductImages = async (productId) => {
	try {
		// 获取产品图片
		const res = await uni.request({
			url: 'https://xiaocheng.top:8209/wx/product/getProductImages?productId=' + productId,
			method: 'POST',
		})
		
		if (res.data.code === 200) {
			productImages.value = res.data.result || []
		} else {
			uni.showToast({
				title: res.data.msg || '获取产品图片失败',
				icon: 'none'
			})
		}
	} catch (error) {
		console.error('获取产品图片失败:', error)
		uni.showToast({
			title: '获取产品图片失败',
			icon: 'none'
		})
	}
}

// 预览图片
const previewImage = (current) => {
	uni.previewImage({
		urls: productImages.value,
		current,
		indicator: 'number',
		loop: true
	})
}

onMounted(() => {
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	const productId = currentPage.options.productId
	
	if (productId) {
		getProductImages(productId)
	}
})
</script>

<style>
.product-container {
	min-height: 100vh;
	background-color: #f8f8f8;
}

/* 页面标题样式 */
.page-title {
	text-align: center;
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
	padding: 30rpx 0;
	background-color: #ffffff;
	margin-bottom: 20rpx;
}

/* 产品图片展示区样式 */
.product-image-container {
	width: 100%;
	height: calc(100vh - 100rpx);
	background-color: #ffffff;
}

.image-item {
	width: 100%;
	margin-bottom: 20rpx;
}

.product-image {
	width: 100%;
	display: block;
}
</style>
